<template>
	<view class="index a" :style="{overflow:'hidden',height:pageHeight}">
		<ugo-search @search="disScroll"></ugo-search>
		
		<view class="swiper">
			<swiper>
				<swiper-item v-for="item in swiper" :key="item.goods_id">
					<navigator :url="'xxxxxx/index?id='+item.goods_id">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		
		<view>
			<uni-calendar 
			:insert="true"
			:lunar="true" 
			:start-date="'2019-3-2'"
			:end-date="'2019-5-20'"
			 />
		</view>
		
		<view class="navs">
			<navigator v-for="item in navs" :key="item.name">
				<image :src="item.image_src" />
			</navigator>
		</view>
		
		
		<!-- 栏目楼层 -->
		<view class="floors">
			<!-- 1 -->
			<view class="floor" v-for="(item, i) in floors" :key="i">
				<!-- title -->
				<view class="ftitle">
					<image :src="item.floor_title.image_src" />
				</view>
				<!-- pics -->
				<view class="fitems">
					<navigator
						class="fitem"
						:url="'/packone/list/index?query=' + prd.name"
						v-for="prd in item.product_list"
						:key="prd.name"
					>
						<image :src="prd.image_src" />
					</navigator>
				</view>
			</view>
		</view>			
		
		<view v-if="isTop" @click="goTop" class="goTop icon-top"></view>
	</view>
</template>
<script>
	export default {
		components: {
		},
		data() {
			return {
				pageHeight: "auto",
				swiper: [],
				navs:[],
				floors: [],
				isTop: false
			}
		},
		onLoad() {
			
			this.getSwiper()
			this.getNavs()
			this.getFloors()
		},
		onPullDownRefresh() {
			Promise.all([this.getSwiper(), this.getNavs(), this.getFloors()]).then(
				() => {
					// 执行完停止loading
					uni.stopPullDownRefresh();
				}
			)
		},
		onPageScroll (e) {
			console.log(e)
			this.isTop = e.scrollTop > uni.getSystemInfoSync().windowHeight / 2
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
				});
			},
			async getSwiper() {
				const {data} = await this.$request({
					url: "home/swiperdata"
				});
				this.swiper = data
			},
			async getNavs() {
				const {data} = await this.$request({
					url: "home/catitems"
				});
				this.navs = data
			},
			async getFloors() {
				const {data} = await this.$request({
					url: "home/floordata"
				});
				this.floors = data
			},
			
			disScroll(e) {
				this.pageHeight = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.swiper{
			swiper, image {
				 width: 750rpx; 
				 height: 340rpx;
			} 
		}
		// 功能导航
		.navs {
			display: flex;
			padding: 30rpx;
			background: #fff;
			justify-content: space-around;
		
			navigator, image {
				display: block;
				width: 128rpx;
				height: 140rpx;
			}
		}
		
		.floors {
			.ftitle {
				padding-top: 30rpx;
				background: #f4f4f4;
			
				image {
					width: 750rpx;
					height: 60rpx;
				}
			}
			.fitems {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				.fitem {
					box-sizing: border-box;
					width: 250rpx;
					height: 200rpx;
					padding:5rpx;
					
					image {
						width: 240rpx;
						height:190rpx;
						// 750 / 3 = 250
					}
				}
			}
		}
		
		.goTop {
			position: fixed;
			bottom: 30rpx;
			/* #ifdef H5 */
			bottom: 65px;
			/* #endif */
			right: 30rpx;
		
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			font-size: 48rpx;
			color: #666;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.8);
		}
	} 
</style>
